<template>
  <!--常规筛选器配置弹窗-->
  <el-dialog v-model="diagVisible" title="编辑筛选字段" width="40%">
    <el-form size="mini" v-if="obj.field.dataType==1" label-position="right" v-model="obj">
      <el-form-item label="字段:">
        <el-input v-model="obj.field.name" readonly style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="标记:">
        <el-radio-group v-model="obj.mark">
          <el-radio label="">无</el-radio>
          <el-radio label="dept">科室</el-radio>
          <el-radio label="doctor">医生</el-radio>
          <el-radio label="organization">组织机构</el-radio>
          <el-radio label="#cz">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="筛选模式:">
        <el-radio-group v-model="obj.filterMode">
          <el-radio :label="0">只包含</el-radio>
          <el-radio :label="1">排除</el-radio>
          <el-radio :label="2">精确</el-radio>
          <el-radio :label="3">模糊</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row v-show="obj.filterMode==0||obj.filterMode==1">
        <el-form-item inline="true" style="margin-right: 20px">
          <el-input v-model="filterItem" placeholder="列表项" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item inline="true">
          <el-button size="mini" type="primary" @click="addFilterItem">手动添加</el-button>
          <el-button size="mini" type="success" @click="loadFilterItems">从数据源载入</el-button>
          <el-button size="mini" @click="clearFilterItems">清空</el-button>
        </el-form-item>
      </el-row>
      <el-scrollbar>
        <el-row v-show="obj.filterMode==0||obj.filterMode==1" style="max-height: 240px;">
          <ul class="list-group list_filteritems">
            <li class="list-group-item" v-for="item in obj.filterItems">
              <span>{{ item }}</span>
              <el-button type="danger" icon="el-icon-delete" size="mini" style="float: right"
                         @click="removeFilterItem(item)"></el-button>
            </li>
          </ul>
        </el-row>
      </el-scrollbar>

      <div class="form-group" v-show="obj.filterMode==2||obj.filterMode==3">
        <el-form-item label="匹配值:">
          <el-input v-model.trim="obj.matchValue" style="width: 180px"></el-input>
        </el-form-item>
      </div>
    </el-form>

    <el-form size="mini" v-if="obj.field.dataType==4" v-model="obj">
      <el-form-item label="字段:">
        <el-input v-model="obj.field.name" readonly style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="标记:">
        <el-radio-group v-model="obj.mark">
          <el-radio label="">无</el-radio>
          <el-radio label="date">时间</el-radio>
          <el-radio label="#cz">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="筛选模式:">
        <el-radio-group v-model="obj.filterMode" style="width: 300px">
          <el-radio :label="4">范围</el-radio>
          <el-radio :label="5">动态</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="日期范围" v-show="obj.filterMode == 4">
        <el-date-picker
          v-model="obj.beginDate"
          type="date"
          format="YYYY-MM-DD"
          :default-value="new Date()"
          placeholder="开始日期" />
        至
        <el-date-picker
          v-model="obj.endDate"
          type="date"
          format="YYYY-MM-DD"
          :default-value="new Date()"
          placeholder="结束日期" style="width: 150px"/>
      </el-form-item>
      <el-form-item label="表达式:" v-show="obj.filterMode == 5">
        <el-select v-model="obj.matchValue">
          <el-option label="今天" value="today"></el-option>
          <el-option label="昨天" value="yesterday"></el-option>
          <el-option label="本月" value="thisMonth"></el-option>
          <el-option label="上月" value="lastMonth"></el-option>
          <el-option label="今年" value="thisYear"></el-option>
          <el-option label="去年" value="lastYear"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-form size="mini" v-if="obj.field.dataType==2" label-position="right" v-model="obj">
      <el-form-item label="字段:">
        <el-input v-model="obj.field.name" readonly style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="最大值:">
        <el-input-number v-model="obj.maxValue" style="width: 280px"></el-input-number>
      </el-form-item>
      <el-form-item label="最小值:">
        <el-input-number v-model="obj.minValue" style="width: 280px"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button size="mini" @click="close">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
    </span>
    </template>
  </el-dialog>

</template>

<script>
import {getDataQuery} from "@/api/dataSource";

export default {
  name: "filterConfig",
  data() {
    return {
      obj: {
        filterMode: 0,
        matchValue: '',
        filterItems: []
      },
      filterItem: "",
      diagVisible: false
    }
  },
  methods: {
    //清空筛选项
    clearFilterItems: function () {
      this.obj.filterItems = []
    },
    //移除筛选项
    removeFilterItem: function (value) {
      _.pull(this.obj.filterItems, value)
    },
    //从数据源加载筛选项
    loadFilterItems: function () {
      const datasource = this.dataSource;
      const field = this.obj.field;
      const request = {
        repositorySourceId: datasource.repositoryId,
        dataProviderType: datasource.dataProviderType,
        fields: [field],
        relations: datasource.tableRelations,
        queryType: datasource.queryType,
        sql: datasource.syntax,
        comments: "加载筛选项",
        beforeExecute: datasource.beforeExecute
      };
      getDataQuery(request, result => {
        this.obj.filterItems.splice(0, this.obj.filterItems.length)
        this.obj.filterItems = _.map(result, this.obj.field.systemName)
      });
    },
    //手动添加筛选项
    addFilterItem() {
      if (this.filterItem) {
        this.obj.filterItems.push(this.filterItem)
        this.filterItem = "";
      }
    },
    //初始化
    open(obj, dataSource) {
      this.dataSource = dataSource;
      if (obj.field.dataType == 4) {
        this.obj.filterMode = 2
        this.obj.matchValue = 'today'
        this.obj.beginDate = new Date()
        this.obj.endDate = new Date()
      }
      if (obj.field.dataType == 1) {
        this.obj.filterMode = 0
        this.obj.filterItems = []
      }
      Object.assign(this.obj, obj)
      this.diagVisible = true
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      })
    },
    //点击确定
    confirm: function () {
      this.resolve(this.obj);
      this.diagVisible = false;
    },
    //取消
    close: function () {
      this.diagVisible = false;
      this.reject("cancel.")
    }
  }
}
</script>

<style scoped>
.list-group {
  width: 100%;
}

.list_filteritems {
  background: #e8e8e8;
}

.list-group .list-group-item {
  border-bottom: 1px solid #ddd !important;
  vertical-align: middle;
  line-height: 30px;
  padding: 1px 15px !important;
}

.list-group .list-group-item {
  font-size: 12px;
}

.modalNormalFilter .list-group-item {
  border-radius: 0;
  padding: 0 0 0 10px;
}
</style>
